<template>
    <div class="radar-box">
        <div :style="{width: width + 'px'}" style="margin-bottom: 30px;"><custom-title :title="title" /></div>
        <div class="rank-box" :style="{width: width + 'px',height: height+'px'}">
            <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
        </div>
    </div>
</template>
  
<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';
export default {
    name: 'rose',
    //是否展示图例
    props: {
        width: {
            type: Number,
            default: 400
        },
        height: {
            type: Number,
            default: 400
        },
        title: {
            type: String,
            default: '预警分析'
        },
        legend: {
            type: Boolean,
            default: true
        },
        data: {
            type: Array,
            default: () => [
                { value: 40, name: 'rose 1' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 18, name: 'rose 8' }
            ]
        },
        colors: {
            type: Array,
            default: () => ['orange','#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a']
        },
    },
    components: {
        ResponsiveBarChart,
    },
    data() {
        return {
            chartOptions: {},
        }
    },
    computed: {},
    watch: {},
    methods: {
        onBarClicked(params) {
            console.log(params);
            // 在这里处理点击事件，例如弹出模态框显示更多数据
        },
        getOption() {
            const colorMap = this.colors.slice(0, this.data.length);
            const seriesData = this.data.map((item, index) => ({
                ...item,
                itemStyle: {
                    color: colorMap[index]
                }
            }));
            this.chartOptions = {
                legend: {
                    top: 'bottom',
                    show: this.legend,
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [20, 100],
                        center: ['50%', '40%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: seriesData
                    }
                ]
            }
        }
    },
    created() {
        this.getOption()
    },
    mounted() { },
}
</script>
  
<style lang='less' scoped></style>